<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="商品信息"
    width="40%"
    @close="emits('closeDialog')"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="rules"
      :label-width="formLabelWidth"
    >
      <el-form-item label="渠道名称" prop="channel">
        <el-input v-model="dialogForm.channel" />
      </el-form-item>
      <el-form-item label="项目名称" prop="project">
        <el-input v-model="dialogForm.project" />
      </el-form-item>
      <el-form-item label="版本" prop="version">
        <el-input v-model="dialogForm.version" />
      </el-form-item>
      <el-form-item label="版本Code" prop="version_code">
        <el-input v-model="dialogForm.version_code" type="number" />
      </el-form-item>
      <el-form-item label="更新内容" prop="version_log">
        <el-input v-model="dialogForm.version_log" type="textarea" :rows="4" />
      </el-form-item>
      <el-form-item label="是否强更" prop="is_force">
        <el-select v-model="dialogForm.is_force" placeholder="是否强更">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="APP包大小" prop="size">
        <el-input v-model="dialogForm.size" />
      </el-form-item>
      <el-form-item label="APP下载地址" prop="upgrade_url">
        <el-input v-model="dialogForm.upgrade_url" />
      </el-form-item>
      <el-form-item label="最小Code" prop="min_code">
        <el-input v-model="dialogForm.min_code" type="number" />
      </el-form-item>
      <el-form-item label="最大Code" prop="max_code">
        <el-input v-model="dialogForm.max_code" type="number" />
      </el-form-item>
      <el-form-item label="更新日期">
        <el-date-picker
          v-model="dialogForm.update_date"
          type="datetime"
          placeholder="更新日期"
        />
      </el-form-item>
      <el-form-item label="id" style="display: none">
        <el-input v-model="dialogForm.id" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);
import { timestamp, pickerDefaultTime } from "@/utils/utils";

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      channel: "",
      project: "",
      version: "",
      version_code: "",
      version_log: "",
      update_date: "",
      size: "",
      upgrade_url: "",
      id: "",
      min_code: "",
      max_code: "",
      is_force: "",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "120px";
// 校验
const rules = {
  //   name: [{ required: true, message: "请输入名字", trigger: "blur" }],
  //   description: [{ required: true, message: "请输入描述", trigger: "blur" }],
  //   amount: [{ required: true, message: "请输入钻石数量", trigger: "blur" }],
  //   ios_price: [{ required: true, message: "请输入ios价格", trigger: "blur" }],
  //   android_price: [
  //     { required: true, message: "请输入iandroid价格", trigger: "blur" },
  //   ],
  //   app_mark: [{ required: true, message: "请选择APP版本", trigger: "blur" }],
};

// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        let query = { ...dialogForm };
        if (query.update_date) {
          query.update_date = timestamp(query.update_date.valueOf());
        }
        emits("submitForm", query);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
